<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
  <script type="text/javascript">
    function alterarVisibilidade1(){
    	document.getElementById("dataExata").style.visibility="visible";
    	document.getElementById("intervalo").style.visibility="hidden";
    	
    }
    
    function alterarVisibilidade2(){
    	document.getElementById("dataExata").style.visibility="hidden";
    	document.getElementById("intervalo").style.visibility="visible";
    	document.getElementById("intervalo").style= document.getElementById("dataExata").style;
    	
    }
     
    
  
  
  </script>
   
 
<body>
      <div style="width:100%;background-color:#E0FFFF;"> 
         <a href= @{Application.inicial()}>Principal</a>
         <a href="@{PaginasClienteCadastrado.pagina_cliente()}">Minha pagina</a>      
      </div>
      
      <div >
      <form action=@{PaginasClienteCadastrado.pagina_pedidos()} method="get">
         <span>numero: </span><input type="text" name="numero"><br>
         <table style="border-style:solid">
             <tr>
               <td>Data</td>
               <td>Intervalo</td>
             </tr>
             <tr>
                <td><input type="radio" id ="r1" name="data"  checked onclick=alterarVisibilidade1()></td>
                <td><input type="radio" id ="r2" name="data" onclick=alterarVisibilidade2() ></td>
         </table>
         <div id="dataExata" style="visibility:visible";>
               <span>Data Exata:</span> <input type="text" name="dataExata">
         </div>
         <div id="intervalo" style="visibility:hidden";>
               <span>Data Inicial</span> 
               
               <input type="text" name="dataInicial">
               <span>Data Final</span>
               <input type="text" name="dataFinal">
         </div>
         Status:
         <select name="status">
             <option value="todos">todos</option>
             <option value="pendente">pendentes</option>
             <option value="visto">Vistos</option>
             <option value="enviado">Enviados</option>
             <option value="efetivado">Efetivados</option>
         
         </select>
         <input type="submit" value="pesquisar"> 
         
         
     </form>
     
   <div style="position:relative;top:5px;width:550px; height:450px;overflow: auto;border-style:solid;border-width:1px;border-color: #E0FFFF";>
     <table  border="1"   >
     
    <p> Pedidos em aberto</p>
       <tr>
         <td>numero</td>
         <td>situacao</td>
         <td>valor</td>
         <td>data do pedido</td> 
         <td>data ultima alteracao</td>
       </tr>
     
     #{list items:pedidos,as: 'pedido'}
       <tr>
         <td>  <a href=@{Application.detalhes_pedido( pedido.getNumero())}>${pedido.getNumero()}</a>  </td>
         <td>${pedido.getStatus()}</td>
         <td>${String.format("R\$ %.2f", pedido.getValorTotal())}</td>
         
         <td>${String.format("%d/%d/%d", pedido.getDataPedido().get(Calendar.DAY_OF_MONTH),
                                         pedido.getDataPedido().get(Calendar.MONTH)+1,
                                         pedido.getDataPedido().get(Calendar.YEAR))} </td>
         #{if pedido.getDataUltimaAlteracao()!=null}                                
         <td>${String.format("%d/%d/%d", pedido.getDataUltimaAlteracao().get(Calendar.DAY_OF_MONTH),
                                         pedido.getDataUltimaAlteracao().get(Calendar.MONTH)+1,
                                         pedido.getDataUltimaAlteracao().get(Calendar.YEAR))} </td>
         #{/if}
         #{else}<td>Ainda não checamos o seu pedido</>#{/else}
                                         
         #{if (!pedido.getStatus().equals("cancelado"))}                                
         #{/if}
       </tr>
     #{/list}


     </table>
     
  
  </div>

</body>
</html>